<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--canvas标签定义图形，比如图表和其他图像。 标签只是图形容器，您必须使用脚本来绘制图形。-->
		<canvas id="Canvas" width="200" height="100" style="border:1px solid #000000;" draggable="true"></canvas>
		<canvas id="myCanvas2"></canvas>
		<canvas id="myCanvas3"></canvas>
		<canvas id="myCanvas"></canvas>

		<script type="text/javascript">
			//首先，找到 <canvas> 元素:
			var c = document.getElementById("myCanvas");
			//然后，创建 context 对象：
			var ctx = c.getContext("2d");
			//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
			//下面的两行代码绘制一个红色的矩形：
			ctx.fillStyle = "#FF0000";
			ctx.fillRect(0, 0, 150, 75);
			//设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
			//fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
			var c = document.getElementById("myCanvas2");
			var ctx = c.getContext("2d");
			//moveTo(x,y) 定义线条开始坐标
			ctx.moveTo(0, 0);
			//lineTo(x,y) 定义线条结束坐标
			ctx.lineTo(200, 100);
			ctx.stroke();
			var c = document.getElementById("myCanvas3");
			var ctx = c.getContext("2d");
			ctx.beginPath();
			//arc(x,y,r,start,stop)
			//画布的左上角坐标为0,0
			// x：圆心在x轴上的坐标
			// y：圆心在y轴上的坐标
			// r：半径长度
			// start：起始角度，以弧度表示，圆心平行的右端为0度
			// stop：结束角度，以弧度表示
			//注意：Math.PI表示180°，画圆的方向是顺时针
			ctx.arc(95, 50, 40, 0, 2 * Math.PI);
			ctx.stroke();
		</script>

	</body>

</html>